<template>
  <div id="toolbar" class="toolbar-style">
    <div v-contextmenu:toolbarmenu class="headers">
      <div id="sidebarButtonWarpper" class="sidebar-btn-wapper" @click="$store.commit('setCollapse', !$store.state.isCollapse)">
        <i
          class="sidebar-btn"
          :class="$store.state.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
        />
      </div>
      <div class="left dis-flex flex-max">
        <div
          v-for="item in getToolbarList()"
          :key="item.value"
          class="title"
          :class="{ active: store.toolbarShowTab === item.value }"
          @click="$store.commit('matlab/changeToolbar', item.value)"
        >
          {{ item.label }}
        </div>
      </div>

      <div class="right flex-max">
        <!--
        <div class="user-message" onclick="window.open('http://47.106.209.124/wiki/')">
          帮助 &nbsp;
        </div>
        <div class="favorites-bar mr-10">
          <div class="favorites-btn">
            <img src="@/assets/images/help.png" alt="" />
          </div>
        </div>-->
        <!--
        <div class="favorites-bar mr-10">
          <div class="favorites-collection-before"></div>
          <div class="favorites-collection"></div>
          <div class="favorites-btn">
            <img src="@/assets/images/arrowcircle_white.png" alt="" />
          </div>
        </div>
        -->
        <div id="search" style="position:relative">
          <el-input
            ref="searchInput"
            v-model="searchText"
            placeholder="搜索函数文档"
            size="mini"
            suffix-icon="el-icon-search"
            class="mr-20"
            @focus="focus"
          />
          <result-list v-show="showList" :search-text="searchText" />
        </div>
        <!-- <div class="user-message mr-10">
          {{ username }}&nbsp;<i class="el-icon-caret-bottom"></i>
        </div> -->
        <div class="user-message mr-10">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              {{ username }}&nbsp;<i class="el-icon-caret-bottom" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <div
      v-if="store.toolbarShowTab !== ''"
      v-contextmenu:toolbarmenu
      class="content"
    >
      <img
        class="icon-toolbar-collapse gray"
        :src="store.isShowToolbar ? collapseup : collapsedown"
        @click="$store.commit('matlab/toolbarCollapse')"
      >
      <main-bar v-if="store.toolbarShowTab === 'main'" />
      <paint-bar v-else-if="store.toolbarShowTab === 'paint'" />
      <editor-bar v-else-if="store.toolbarShowTab === 'editor'" />
      <!-- <version-bar v-else-if="store.toolbarShowTab === 'version'"></version-bar> -->
      <!-- <view-bar v-else-if="store.toolbarShowTab === 'view'"></view-bar> -->
      <variable-bar v-else-if="store.toolbarShowTab === 'variable'" />
    </div>

    <v-contextmenu ref="toolbarmenu">
      <v-contextmenu-item
        v-if="store.isShowToolbar"
        @click="$store.commit('matlab/toolbarCollapse')"
      >最小化工具条</v-contextmenu-item>
      <v-contextmenu-item
        v-else
        @click="$store.commit('matlab/toolbarCollapse')"
      >还原工具条</v-contextmenu-item>
    </v-contextmenu>
  </div>
</template>

<script>
import MainBar from './MainBar.vue';
import PaintBar from './PaintBar.vue';
import EditorBar from './EditorBar.vue';
// import VersionBar from './VersionBar.vue';
// import ViewBar from './ViewBar.vue';
import ResultList from './ResultList.vue';
import VariableBar from './VariableBar.vue';
export default {
  components: {
    ResultList,
    MainBar,
    PaintBar,
    EditorBar,
    // VersionBar,
    // ViewBar,
    VariableBar
  },
  data() {
    return {
      searchText: '',
      showList: false,
      toolbarList: [
        { label: '主页', value: 'main' },
        { label: '绘图', value: 'paint' }
        // { label: 'APP', value: 'app' }
      ],
      editorList: [
        { label: '编辑器', value: 'editor' }
        // { label: '发布', value: 'product' },
        // { label: '文件版本', value: 'version' },
        // { label: '视图', value: 'view' }
      ],
      variableList: [
        { label: '变量', value: 'variable' }
      ],
      username: '',
      store: null,
      collapseup: require('@/assets/images/icon_collapseup.png'),
      collapsedown: require('@/assets/images/icon_collapsedown.png')
    };
  },
  created() {
    this.store = this.$store.state.matlab;
  },
  mounted() {
  },
  methods: {
    getToolbarList() {
      this.username = this.$store.state.user.username;
      const index = this.store.editorFiles.findIndexByKey('id', this.store.editorFilesId);
      if (index !== -1) {
        if (this.store.editorFiles[index].display === 'file') {
          return this.toolbarList.concat(this.editorList);
        } else if (this.store.editorFiles[index].display === 'variable') {
          return this.toolbarList.concat(this.variableList);
        }
      } else {
        return this.toolbarList;
      }
    },
    focus() {
      this.$store.commit('functions/setSearching', true);
      this.showList = true;
      this.$refs.searchInput.$el.style.width = `550px`;
    },
    blur() {
      this.showList = false;
      this.searchText = ``;
      this.$store.commit('functions/setSearching', false);
      this.$refs.searchInput.$el.style.width = `150px`;
    },
    handleCommand(command) {
      if (command === 'logout') {
        this.$store.commit('user/clearData');
        this.$store.commit('matlab/clearEditorFiles');
        this.$store.commit('matlab/clearVariables');
        this.$router.push('/login');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.toolbar-style {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  // z-index: 20;
  z-index:99;
  user-select: none;

  .headers {
    display: flex;
    background: #004073;
    width: 100%;
    height: 28px;
    padding-left: 0px;
    .sidebar-btn-wapper{
      width: 40px;
      background-color: #004073;
      .sidebar-btn {
        position: absolute;
        color: white;
        top: 4px;
        left: 10px;
        font-size: 20px;
      }
    }

    .left {
      flex: 1;
      .title {
        height: 25px;
        margin: 3px 3px 0;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        color: white;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        padding-top: 3px;
        flex: 1;

        &:hover {
          background: rgba(255, 255, 255, 0.35);
        }

        &.active {
          color: #333;
          background: #e6e6e6;
        }
      }
    }

    .right {
      display: flex;
      justify-content: flex-end;
      position: relative;

      .favorites-bar {
        display: flex;
        height: 22px;
        margin-top: 3px;

        .favorites-collection {
          width: 10px;
          height: 100%;
          position: relative;
          background: rgba($color: #fff, $alpha: 0.4);
          border-right: 1px solid #555;
        }

        .favorites-collection-before {
          border-top: 11px solid transparent;
          border-bottom: 11px solid transparent;
          border-right: 7px solid rgba(255, 255, 255, 0.4);
        }

        .favorites-btn {
          width: 16px;
          padding: 2px;
          background: rgba($color: #fff, $alpha: 0.4);
          border-left: 1px solid #999;
          border-top-right-radius: 2px;
          border-bottom-right-radius: 2px;

          img {
            width: 100%;
          }
        }
      }

      ::v-deep .el-input {
        width: 150px;
        margin-top: 5px;
        // 聚焦状态变长
        transition:.3s;
        &:hover{
          filter: brightness(80%);
        }
        input {
          height: 18px;
          line-height: 18px;
          font-size: 12px;
          border-radius: 0;
          padding-left: 5px;
        }

        .el-input__icon {
          width: 18px;
          height: 18px;
          line-height: 18px;
        }
      }

      .user-message {
        color: white;
        font-size: 12px;
        line-height: 28px;

        .el-dropdown-link {
          cursor: pointer;
          color: white;
        }
      }
    }
  }

  .icon-toolbar-collapse {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 12px;
    height: 12px;
    z-index: 10;
  }
}
</style>
